<script setup lang="ts">
  import { defineProps, computed } from 'vue';

  const props = defineProps({
    primary: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: 'medium',
    },
    backgroundColor: {
      type: String,
      default: null,
    },
    label: {
      type: String,
      required: true,
    },
    some: {
      type: String,
      default: 'some',
    }
  });

  const mode = computed(() => {return props.primary ? 'demo-button--primary' : 'demo-button--secondary';});
</script>

<template>
  <button
    type="button"
    :class="['demo-button', `demo-button--${size}`, mode]"
    :style="{ backgroundColor }"
    label=""
  >
    {{ label }}
  </button>
</template>

<style>
.demo-button {
  font-weight: 700;
  border: 0;
  border-radius: 3em;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
}

.demo-button--primary {
  color: #fff;
  background-color: #4CAF50;
}

.demo-button--secondary {
  color: #333;
  background-color: transparent;
  box-shadow: rgba(0, 0, 0, 0.15) 0 0 0 1px inset;
}

.demo-button--small {
  font-size: 12px;
  padding: 10px 16px;
}

.demo-button--medium {
  font-size: 14px;
  padding: 11px 20px;
}

.demo-button--large {
  font-size: 16px;
  padding: 12px 24px;
}
</style>